<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel 用于将 jsx转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <style>
        .demo {
            width: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="test"></div>

    <script type="text/babel">
        const myId = "title";
        const myData = "hello React";
        const VDOM = (
            <div>
                <h1 id={myId} className="demo">
                    <span style={{color: "red",fontSize: '24px'}}>
                        {myData}
                    </span>
                </h1>
                <input type="text" />
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById("test"));
    </script>

    <!--
        jsx 基础语法规则
        1. 定义虚拟DOM时不能使用引号.
        2. 标签中混入js表达式时需要使用 {}
        3. 样式的类名不能使用class,要使用 className
        4. 内联样式要用 style={{key:value}}的形式
        5. 只有一个跟标签
        6. 标签必须闭合
        7. 标签首字母
           (1) 若小写字母开头，则将改标签转为htm1中同名元素，若htm1中无该标签对应的同名元素，则报错
           (2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
    -->

</body>
</html>